<template>
  <div class="order_confirm wrapper_1200">
    <div class="header">
      <nuxt-link class="home" to="/">{{ $t(`page.store.index`) }} </nuxt-link> <span> > {{ $t(`submitOrder`) }} </span>
    </div>
    <div class="address">
      <div class="title">{{ $t(`page.orderDetails.address`) }}</div>
      <div class="lines">
        <img src="../../assets/images/line.png">
      </div>
      <div class="list acea-row row-middle" :class="isShow ? 'on' : ''">
        <div class="item" :class="current === index ? 'on' : ''" v-for="(item, index) in addressList" :key="index"
          @click="tapCurrent(index, item)">
          <div class="default bg-color" v-if="item.isDefault">{{ $t(`page.goodsList.default`) }}</div>
          <div class="name line1">{{ item.realName }}</div>
          <div class="phone">{{ item.phone }}</div>
          <div class="details line4">{{ item.country }}{{ item.province }}{{ item.city }}{{ item.detail }}</div>
          <div class="iconfont icon-xuanzhong4" v-if="current === index"></div>
        </div>
        <div class="item add" @click="addAddress">
          <div class="iconfont icon-tianjia"></div>
          <div class="tip">{{ $t(`page.users.userAddressList.add`) }}</div>
        </div>
      </div>
    </div>
    <div class="isShow" @click="open" v-if="!isShow && addressList.length > 3">{{ $t(`message.tips.more`) }}<span
        class="iconfont icon-xiangxia"></span></div>
    <div style="margin-top: 10px" v-if="addressList.length <= 3"></div>
    <div class="isShow" @click="close" v-if="isShow && addressList.length > 3">{{ $t(`message.tips.hide`) }}<span
        class="iconfont icon-xiangshang"></span></div>
    <div class="wrapper wrapper_1200">
      <div v-for="(item, index) in cartInfo" :key="index">
        <order-goods :cartInfo="item.orderInfoList" :orderInfo="item"></order-goods>
      </div>
      <div class="wrapper_count">
        <div v-show="couponList.length > 0" class="couponListBox">
          <div class='integral_count acea-row row-between'>
            <div class="integral_title">{{ $t(`page.users.orderConfirm.CouponDeduction`) }}：</div>
            <div class="couponPrice font-color">-
              <statistic :value="orderInfoVo.couponFee" :currency="orderInfoVo.currency" />
            </div>
          </div>
          <div class="couponList acea-row row-middle">
            <div class="item acea-row row-middle" :class="itemn.disabled ? 'disabled' : ''"
              v-for="(itemn, indexn) in couponList" :key="indexn" @click="getCoupon(itemn)">

              <div class="name" v-if="itemn.useType === 1">{{ $t(`page.users.userCoupon.navList[0].name`) }}</div>
              <div class="name" v-else>{{ $t(`page.users.userCoupon.navList[1].name`) }}</div>
              <div class="money line1">{{ itemn.minPrice }} {{ $t(`page.users.userCoupon.minus`) }} {{
                parseFloat(itemn.money) }}</div>
              <div class="iconfont icon-xuanzhong4" v-if="itemn.checked"></div>
            </div>
          </div>
          <div class="line"></div>
        </div>
        <div class="payType">
          <div class="title">{{ $t(`page.orderPayStatus.payType`) }}</div>
          <div class="type acea-row row-middle mb15">
            <div v-show="payInfo.offlineStatus" class="item acea-row row-center-wrapper mr20"
              :class="{ 'on': payStatus === 'offline' }" @click="currentPay('offline')">
              <div class="iconfont icon-weixinzhifu1"><img src="../../assets/images/bank.png" /></div>
              <div>
                <div class="name">{{ $t(`offlinePayment`) }}</div>
              </div>
              <div class="iconfont icon-xuanzhong4" v-if="payStatus === 'offline'"></div>
            </div>
            <div v-show="payInfo.stripeStatus" class="item acea-row row-center-wrapper"
              :class="{ 'on': payStatus === 'stripe' }" @click="currentPay('stripe')">
              <div class="iconfont icon-yue"><img src="../../assets/images/stripe.png" /></div>
              <div>
                <div class="name">Stripe</div>
              </div>
              <div class="iconfont icon-xuanzhong4" v-if="payStatus === 'stripe'"></div>
            </div>
            <div v-show="payInfo.paypalStatus" class="item acea-row row-center-wrapper"
              :class="{ 'on': payStatus === 'paypal' }" @click="currentPay('paypal')">
              <div class="iconfont icon-weixinzhifu1"><img src="../../assets/images/PayPal.png" /></div>
              <div>
                <div class="name">PayPal</div>
              </div>
              <div class="iconfont icon-xuanzhong4" v-if="payStatus === 'paypal'"></div>
            </div>
            <div v-show="payInfo.freedomStatus" class="item acea-row row-center-wrapper"
              :class="{ 'on': payStatus === 'freedom' }" @click="currentPay('freedom')">
              <div class="iconfont icon-weixinzhifu1"><img src="../../assets/images/freedompay.svg" /></div>
              <div>
                <div class="name"></div>
              </div>
              <div class="iconfont icon-xuanzhong4" v-if="payStatus === 'freedom'"></div>
            </div>
          </div>
          <div class="line"></div>
        </div>
        <div class="coupon message acea-row">
          <div class="msgTitle">{{ $t(`page.users.orderConfirm.note`) }}</div>
          <textarea class="textarea" :placeholder='$t(`page.users.orderConfirm.placeNote`)' v-model="mark"
            maxlength="150"></textarea>
        </div>
        <div class="totalCon">
          <div class="total acea-row row-middle row-right">
            <div>{{ $t(`page.users.orderConfirm.allPrice`) }}：</div>
            <div class="money">
              <statistic :valueStyle="{ color: '#282828' }" :value="orderInfoVo.proTotalFee || 0"
                :currency="orderInfoVo.currency" />
            </div>
          </div>
          <div class="total acea-row row-middle row-right"
            v-if="orderInfoVo.couponFee && parseFloat(orderInfoVo.couponFee) > 0">
            <div>{{ $t(`page.users.orderConfirm.CouponDeduction`) }}：</div>
            <div class="money">-
              <statistic :valueStyle="{ color: '#282828' }" :value="orderInfoVo.couponFee || 0"
                :currency="orderInfoVo.currency" />
            </div>
          </div>
          <div class="total acea-row row-middle row-right">
            <div>{{ $t(`page.users.orderConfirm.freight`) }}：</div>


            <div class="money" slot="reference">+
              <statistic :valueStyle="{ color: '#282828' }" :value="orderInfoVo.freightFee || 0"
                :currency="orderInfoVo.currency" />
              <template v-if="orderInfoVo.orderFreightFee">
                <el-popover placement="right"  trigger="click">
                  <div v-for="item in orderInfoVo.orderFreightFee.feeDetails" class="total acea-row row-middle row-right">
                    <div>{{ item.feeName }}：</div>
                    <div class="money" slot="reference">
                      +
                      <statistic :valueStyle="{ color: '#282828' }" :value="item.feeAmount || 0"
                        :currency="orderInfoVo.currency" />
                    </div>
                  </div>
                  <div slot="reference" class="el-icon-info" style="cursor: pointer;"></div>
                </el-popover>
              </template>

            </div>
          </div>
        </div>
        <div class="totalAmount">{{ $t(`page.users.orderConfirm.total`) }}：<span class="money font-color">
            <statistic :value="orderInfoVo.payFee" :currency="orderInfoVo.currency" />
          </span></div>
        <div class="bnt acea-row row-right">
          <button class="submit" :loading="loading" @click="SubOrder($event)">{{ $t(`page.users.orderConfirm.payPal`)
          }}</button>
        </div>
      </div>
    </div>
    <FloatWindow></FloatWindow>
    <!-- 添加地址弹窗 -->
    <el-dialog :title="$t('page.users.userAddressList.add')" :visible.sync="dialogVisible" width="700px"
      :before-close="handleClose">
      <add-address @closeAddress="closeAddress" ref="addAddress" :formDatas="formData"></add-address>
    </el-dialog>


  </div>
</template>

<script>

import { Message, MessageBox } from 'element-ui';
import orderGoods from "@/components/orderGoods";
import addAddress from "@/components/addAddress";
import { Debounce } from '@/utils/validate.js'
export default {
  name: "order_confirm",
  auth: "guest",
  components: { orderGoods, addAddress },
  data() {
    return {
      gridData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      news: 1,
      loading: false,
      dialogVisible: false,
      addressList: [],
      current: 0,
      payStatus: 0,
      mark: '',//备注信息
      addressInfo: {},
      couponIndex: 0, //选择商铺优惠券索引
      couponList: [],
      orderInfoVo: {},
      payType: '',
      isShow: false,
      cartInfo: {},
      couponId: null,
      formData: {},
      currency: '',
    }
  },
  async asyncData({ app, query }) {
    let [pay] = await Promise.all([
      // app.$axios.get('/api/pc/address/all/list'),
      app.$axios.get('/api/front/pay/method')
    ]);
    return {
      // addressList: list.data,
      preOrderNo: query.preOrderNo,
      payInfo: pay.data
    }
  },
  mounted() {
    this.currency = this.$store.state.currency
    let keys = Object.keys(this.payInfo)
    for (const key of keys) {
      if (this.payInfo[key]) {
        this.payStatus = key.split('Status')[0]
        this.payType = key.split('Status')[0]
        break
      }
    }

    this.$nextTick(() => {
      this.$nuxt.$loading.start()
    })
  },
  head() {
    return {
      title: "下单"
    }
  },
  beforeCreate() {
    this.$nextTick(() => {
      this.$nuxt.$loading.start()
    })
  },
  beforeMount() {
    this.getAddressList();
    this.getloadPreOrder();
    this.getPlantCoupon();
  },
  methods: {
    currentPay(type) {
      this.payStatus = type;
      this.payType = type
    },
    getloadPreOrder() {
      this.$axios.get(`/api/front/order/load/pre/${this.preOrderNo}`).then(res => {
        let orderInfoVo = res.data
        this.orderInfoVo = orderInfoVo;
        this.orderInfoVo.couponFee = 0;
        this.cartInfo = orderInfoVo.orderList;
      }).catch(err => {
        this.$router.push({ path: '/users/order_list' });
      })
    },
    closeAddress() {
      this.handleClose()
      this.getAddressList()
    },
    handleClose() {
      this.$refs.addAddress.resetForm('formData')
      this.dialogVisible = false
    },
    /*订单优惠券*/
    getPlantCoupon() {
      this.$axios.get(`/api/front/coupons/order/${this.preOrderNo}`).then(res => {
        this.couponList = res.data
      })
    },

    getCoupon(coupon) {
      this.$set(coupon, 'checked', !coupon.checked);
      if (coupon.checked) {
        this.couponId = coupon.id
      } else {
        this.couponId = ''
      }
      this.$axios.post('/api/front/order/computed/price', {
        addressId: this.addressInfo.id,
        couponId: this.couponId,
        preOrderNo: this.preOrderNo
      }).then(res => {
        let data = res.data;
        this.orderInfoVo.couponFee = data.couponFee;
        this.orderInfoVo.freightFee = data.freightFee;
        this.orderInfoVo.proTotalFee = data.proTotalFee;
        this.orderInfoVo.payFee = data.payFee;
      })
    },
    addAddress() {
      this.dialogVisible = true
    },

    SubOrder: Debounce(function (event) {
      let that = this;
      let data = {};
      MessageBox.confirm(this.$t('payTis'), this.$t('message.login.prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
      }).then(res => {
        that.loading = true
        if (!that.addressInfo.id) return Message.error(that.$t(`message.orderConfirm.emptyAddress`))
        let btn = event.target;
        btn.disabled = true;
        data = {
          realName: that.addressInfo.realName,
          phone: that.addressInfo.phone,
          addressId: that.addressInfo.id,
          couponId: that.couponId,
          payType: that.payType,
          preOrderNo: that.preOrderNo,
          mark: that.mark,
          email: that.addressInfo.email,
          payChannel: 'pc'
        };
        that.$axios.post('/api/front/order/create', data).then(res => {
          // 查询购物车数量
          console.log(11111111111111111111);
          this.carCount()
          // 线下支付 直接跳转到待付款页面
          if (that.payType === 'offline') {
            that.$router.push({
              path: `/order/order_detail`,
              query: { orderNo: res.data.orderNo, orderStatus: 0 }
            });
          }
          else if (that.payType === 'freedom') {
            that.freedomPay(res.data.orderNo)
          }
          else {
            that.getOrderPay(res.data.orderNo);
          }
        }).catch(err => {
          btn.disabled = false;
        })
      });
    }),
    carCount() {
      this.$axios.get("/api/front/cart/count",{
        params: {
          numType: true,
          type: 'sum'
        }
      }).then(res => {
        this.$store.commit('cartNum', res.data.count||0);
      })
    },
    // 哈萨克斯坦 freedom支付
    // 接口获取到支付地址 然后跳转
    freedomPay(orderNo) {
      this.$axios.post('/api/front/freedom_init_payment', {
        mallOrderNo: orderNo,
        payChannel: 'pc'
      }).then(res => {
        window.location.href = res.data;
      })
    },
    getOrderPay(orderNo) {
      this.$axios.post('/api/front/pay/payment', {
        orderNo: orderNo,
        payType: this.payType,
        payChannel: 'pc'
      }).then(res => {
        switch (this.payType) {
          case 'paypal':
            window.location.href = res.data.redirect;
            break;
          case 'stripe':
            this.$router.push({
              path: `/order/stripe_payment`,
              query: { clientSecret: res.data.stripeClientSecret }
            });
            break;
        }

      })
    },
    getAddressList() {
      let that = this;
      that.$axios.get('/api/pc/address/all/list').then(res => {
        that.addressList = res.data;
        for (let index = 0; index < that.addressList.length; index++) {
          const element = that.addressList[index];
          that.addressInfo = that.addressList[0];
          that.current = 0;
          if (element.isDefault) {
            that.addressInfo = element;
            that.current = index;
            break
          }
        }
      })
    },
    tapCurrent(index, item) {
      this.current = index;
      this.addressInfo = item;
    },
    open() {
      this.isShow = true
    },
    close() {
      this.isShow = false
    },
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/css/variables.scss';

.mr20 {
  margin-right: 20px;
}

.payType {
  width: 100%;
  background-color: #fff;
  padding: 0 30px;

  .title {
    height: 68px !important;
    line-height: 68px !important;
    font-size: 14px !important;
    color: #282828 !important;
    padding: 0 !important;
  }

  .type {
    .item {
      width: 210px;
      height: 70px;
      border: 1px solid #D4D4D4;
      position: relative;
      cursor: pointer;

      &~.item {
        margin-right: 20px;
      }

      &.on {
        border-color: #86B82D;
      }

      .iconfont {
        color: #09BB07;
        font-size: 29px;
        margin-right: 11px;

        &.icon-yue {
          font-size: 32px;
          color: #FE9C01;
        }

        &.icon-zhifubao {
          font-size: 36px;
          color: #00AAEA;
        }
      }

      .icon-xuanzhong4 {
        position: absolute;
        right: -4px;
        bottom: -4px;
        margin: 0 !important;
        color: $user--color-primary !important;
      }

      .name {
        font-size: 16px;
        color: #4E4E4E;
      }

      .yue {
        font-size: 14px;
        color: #969696;
        margin-top: 6px;
      }
    }
  }

  .goPay {
    margin: 80px 50px 0 0;

    .bnt,
    .button {
      width: 180px;
      height: 46px;
      font-size: 16px;
      color: #fff;
      border-radius: 4px;
      text-align: center;
      line-height: 46px;
      cursor: pointer;
    }

    .button {
      outline: none;
      border: none;
      background-color: #86B82D;

      &:disabled {
        border-color: #fab6b6;
        background-color: #fab6b6;
      }
    }
  }
}

.line {
  border-bottom: 1px solid #EFEFEF;
  ;
}

.couponListBox {
  padding: 30px 30px 0 30px;
}

.input-item {
  margin-bottom: 20px;
}

.item-require {
  color: #86B82D;
  margin-right: 2px;
}

.text-wrapper {
  position: relative;
  height: 40px;
  line-height: 40px;
  border: 1px solid #DCDFE6;
  padding: 0 15px;
  box-sizing: border-box;
  border-radius: 4px;
  color: #cfcfcf;

  .select-wrapper {
    z-index: 10;
    position: absolute;
    left: 0;
    top: 45px;
    width: 100%;
    padding: 0 15px;
    background: #fff;
    border: 1px solid #86B82D;
    border-radius: 4px;
    line-height: 2;

    .title-box {
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #EFEFEF;
      color: #86B82D;
      font-size: 14px;

      span {
        margin-right: 8px;
        color: #666666;
      }
    }

    .label-txt {
      margin: 8px 0 18px;
      color: #666666;
      font-size: 14px;

      span {
        margin-right: 10px;
        cursor: pointer;

        &.on {
          color: #86B82D;
        }
      }
    }
  }
}

.order_confirm {
  .header {
    height: 60px;
    line-height: 60px;
    color: #999999;

    .home {
      color: #282828;
    }
  }

  .address {
    background-color: #fff;

    .title {
      height: 64px;
      font-size: 18px;
      padding: 0 28px;
      line-height: 64px;
    }

    .lines {
      width: 100%;
      height: 4px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .list {
      padding: 0 25px 26px 25px;
      height: 217px;
      overflow: hidden;

      &.on {
        height: auto;
      }

      .item {
        width: 250px;
        height: 170px;
        border: 1px solid #EAEAEA;
        padding: 22px 27px;
        overflow: hidden;
        margin: 30px 0 0 30px;
        position: relative;
        cursor: pointer;

        &.on {
          border: 1px solid #86B82D;
        }

        .icon-xuanzhong4 {
          position: absolute;
          right: -4px;
          bottom: -4px;
          font-size: 27px;

          color: $user--color-primary !important;
        }

        .default {
          position: absolute;
          width: 56px;
          height: 23px;
          font-size: 12px;
          color: #fff;
          text-align: center;
          line-height: 23px;
          top: 0;
          right: 0;
          background-color: $user--color-primary !important;
        }

        &.add {
          text-align: center;

          .iconfont {
            font-size: 35px;
            color: #BFBFBF;
            margin-top: 25px;
          }

          .tip {
            color: #C8C8C8;
            margin-top: 8px;
          }
        }

        .name {
          font-size: 16px;
        }

        .phone {
          margin-top: 9px;
        }

        .details {
          color: #999;
          margin-top: 4px;
        }
      }
    }
  }

  .develivery {
    margin-left: 30px;

  }

  .develivery_take {
    margin-left: 100px;
    font-size: 14px;
    font-weight: normal;
    padding-left: 16px;
    position: relative;
    top: -10px;
    padding-bottom: 8px;

    span {
      color: #86B82D;
      font-size: 14px;
      position: absolute;
      top: 3px;
      left: 0;
    }
  }

  .deliviery_item {
    margin-right: 12px;
    box-sizing: border-box;
    cursor: pointer;

    .cont {
      position: relative;
      height: 32px;
      border: 1px solid #d3d3d3;
      display: flex;
    }

    &.checked {
      .cont {
        border-color: #86B82D;
        color: #86B82D;
      }
    }

    .name {
      padding: 0 50px;
      font-size: 16px;

    }

    .iconfont {
      position: absolute;
      right: -2px;
      bottom: -3px;
      font-size: 22px;
    }
  }

  .isShow {
    width: 100%;
    height: 46px;
    line-height: 46px;
    text-align: center;
    color: #707070;
    cursor: pointer;

    .iconfont {
      margin-left: 8px;
      font-size: 12px;
    }
  }

  .couponList {
    .item {
      height: 40px;
      /*width: 182px;*/
      border: 1px solid #86B82D;
      margin: 0 20px 30px 0;
      position: relative;
      cursor: pointer;

      &.disabled {
        pointer-events: none;
        opacity: .6;
      }

      &.grey {
        border-color: #B4B4B4;
      }

      .iconfont {
        position: absolute;
        right: -3px;
        bottom: -2px;
        font-size: 20px;
      }

      .name {
        width: 70px;
        height: 100%;
        color: #fff;
        text-align: center;
        line-height: 40px;
        background-color: #86B82D;

        &.grey {
          background-color: #B4B4B4;
        }
      }

      .money {
        width: 110px;
        text-align: center;
        color: #86B82D;

        &.grey {
          color: #B4B4B4;
        }
      }

      &.svip {
        border-color: #333;

        .name {
          background-color: #333;
          color: #FDD7B4;
        }

        .money {
          color: #333;
        }
      }
    }
  }

  .coupon {
    .icon-wenhao {
      color: #fff;
      display: inline-block;
      width: 14px;
      height: 14px;
      text-align: center;
      line-height: 14px;
      background-color: #236FE9;
      border-radius: 100%;
      font-size: 8px;
      margin-right: 5px;
    }

    .plantTitle {
      font-size: 18px;
      position: relative;

      .title {
        align-items: center;
        padding: 0;

        span {
          margin-left: 3px;
          cursor: pointer;
        }
      }
    }

    .couponTitle {
      font-size: 18px;
      padding: 26px 0;
      position: relative;

      .title {
        align-items: center;

        span {
          margin-left: 3px;
          cursor: pointer;
        }
      }

      .couponPrice {
        font-size: 16px;
        font-weight: bold;
      }

      .couponPriceNo {
        font-size: 14px;
      }
    }

    &.invoice {
      padding-bottom: 26px;

      .couponTitle {
        padding-bottom: 15px;
      }
    }

    .invoice_info {
      font-size: 14px;
      margin-left: 102px;
      color: #236FE9;
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .invoice_data {
      position: absolute;
      right: 0;
      bottom: 20px;
      font-size: 16px;
      display: flex;

      .data_item {
        margin-left: 20px;

        &.modify {
          cursor: pointer;
        }
      }
    }

    .integralCurrent {
      margin-left: 33px;

      .num {
        margin-left: 6px;
      }
    }

    .msgTitle {
      font-size: 14px;
      color: #282828;
    }
  }

  .message {
    padding: 30px;

    .textarea {
      flex: 1;
      height: 120px;
      background-color: #F7F7F7;
      border: 0;
      outline: none;
      resize: none;
      padding: 12px 14px;
      margin-left: 26px;
    }
  }

  .wrapper {
    .wrapper_count {
      background-color: #fff;
      padding-bottom: 56px;

      &:last-child {
        margin-top: 14px;
      }
    }

    .checkbox-wrapper {
      display: inline-block;
      width: 14px;
      height: 14px;
      margin-right: 10px;
    }

    .money_count {
      margin-right: 30px;

    }

    .money_down {
      color: #fff;
      font-size: 12px;
      line-height: 17px;
      height: 17px;
      background-color: #86B82D;
      width: 34px;
      text-align: center;
      border-radius: 3px;
      margin-right: 10px;
    }

    .money_final {
      margin-top: 6px;
      color: #666666;
      font-size: 14px;
    }

    .integral_count {
      padding: 0 0 24px 0;
      position: relative;

      .integral_title {
        font-size: 14px;
        color: #282828;
      }

      .money {
        margin-top: 15px;
        align-items: center;
      }

      .integral_price {
        position: absolute;
        right: 32px;
      }
    }

    .title {
      height: 64px;
      line-height: 64px;
      padding: 0 28px;
      font-size: 18px;
    }

    .cartCount {
      padding: 0 32px 26px;
      margin-bottom: 20px;
      border: 1px solid #EFEFEF;
    }

    .storeInfo {
      height: 60px;
      border-bottom: 1px solid #EFEFEF;
      position: relative;

      .qrcode {
        position: absolute;
        background: #fff;
        right: -15px;
        display: none;
        z-index: 10;
        bottom: 60px;
        border: 1px solid #ddd;
        width: 110px;
        height: 110px;

        img {
          width: 100%;
        }
      }

      .name {
        color: #666666;
      }

      .service {
        cursor: pointer;

        .iconfont {
          color: #86B82D;
          font-size: 18px;
        }

        &:hover {
          +.qrcode {
            display: inline;
          }
        }
      }
    }

    .totalCon {
      padding: 27px 46px;

      .total {
        &~.total {
          margin-top: 12px;
        }

        .money {
          width: 120px;
          text-align: right;
          font-size: 16px;
        }
      }
    }

    .totalAmount {
      width: 1160px;
      height: 70px;
      line-height: 70px;
      background: #F7F7F7;
      text-align: right;
      padding-right: 22px;
      margin: 0 auto;

      .money {
        font-size: 20px;
        font-weight: bold;
        margin-left: 4px;
        width: 120px;
        display: inline-block;
      }
    }

    .bnt {
      margin: 38px 20px 0 0;
      cursor: pointer;

      .submit {
        width: 180px;
        height: 46px;
        border-radius: 4px;
        font-size: 16px;
        color: #fff;
        text-align: center;
        line-height: 46px;
        outline: none;
        border: none;
        background-color: #86B82D;

        &:disabled {
          border-color: #fab6b6;
          background-color: #fab6b6;
        }
      }
    }
  }
}

.virtual_form {
  margin-top: 30px;
  border-top: 1px solid #EFEFEF;

  .virtual-item {
    margin-top: 20px;

    .item {
      align-items: center;
    }

    .virtual-title {
      width: 100px;
    }

    .discount,
    .el-date-editor.el-input {
      width: 330px;
    }

    .el-range-editor--small.el-input__inner {
      height: 40px;
      width: 330px;
    }
  }
}

.presell_protocol {
  cursor: pointer;
}

.check_protocal .icon {
  border-radius: 0;
  width: 16px;
  height: 16px;
}

.invoice_description img {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
}

.invoice_data_container {
  padding-left: 26px;
  padding-right: 26px;
}

.invoice_item {
  box-sizing: border-box;
  cursor: pointer;
  margin-right: 14px;

  &:last-child {
    margin-right: 0;
  }

  .cont {
    position: relative;
    height: 32px;
    border: 1px solid #d3d3d3;
    display: flex;
    align-items: center;
  }

  &.checked {
    .cont {
      border-color: #86B82D;
      color: #86B82D;
    }

    .iconfont {
      display: block;
    }
  }

  .name {
    padding: 0 40px;
    font-size: 14px;
    line-height: 32px;
  }

  .iconfont {
    position: absolute;
    right: -3px;
    bottom: -12px;
    font-size: 22px;
    display: none;
  }
}

.invoice_type_info {
  font-size: 12px;
  color: #999999;
  line-height: 20px;
  margin-top: 10px;
}

.disabled {
  pointer-events: none;
  opacity: 0.5;
}

.bankInfo {
  background-color: #F7F7F7;
  border-radius: 4px;
  padding: 16px;

  .bankAccount {
    h4 {
      font-size: 14px;
      font-weight: 600;
      line-height: 22px;
    }

    >div {
      line-height: 30px;
      margin-top: 10px;
    }
  }
}

::v-deep {
  .el-form-item__label {
    color: #30303C;
  }
}

.icon-xuanzhong4 {
  color: #86B82D;
}
</style>
